body {
  background-color: #EBECF0;
  font-size: 12px;
}

.themed-block:first-of-type {
  --back-color: #EBECF0;
  --text-color: #A2B1CA;
  --title-color: #6C7A92;
  --shadow-color: 0, 0, 0;
  --light-color: 255, 255, 255;
  --border-active-color: #EEE;
  --main-action-left: #779DFF;
  --main-action-right: #9EB8FF;
  background-color: #ddd;
}

.themed-block:nth-of-type(2) {
  --back-color: #2E3237;
  --text-color: #707174;
  --title-color: #A7A9AA;
  --shadow-color: 0, 0, 0;
  --light-color: 80, 80, 80;
  --border-active-color: #444;
  --main-action-left: #D43C0B;
  --main-action-right: #BF8A10;
  background-color: #26282B;
}

.btn:focus {
  outline: none;
}

.neumorphic-btn {
  padding: 10px 15px;
  border-radius: 25px;
  background-color: var(--back-color);
  border: 2px solid var(--back-color);
  box-shadow: 7px 7px 15px 0px rgba(var(--shadow-color), .3), -7px -7px 15px 0px rgba(var(--light-color), 1), inset 0px 0px 0px 0px rgba(var(--shadow-color), 0), inset 0px 0px 0px 0px rgba(var(--light-color), 0);
  transition: all .25s ease;
  color: var(--text-color);
  font-size: 12px;
  text-shadow: 0px 0px 2px rgba(var(--text-color), 0);
}

.neumorphic-btn:focus {
  box-shadow: 7px 7px 15px 0px rgba(var(--shadow-color), .3), -7px -7px 15px 0px rgba(var(--light-color), 1), inset 0px 0px 0px 0px rgba(var(--shadow-color), 0), inset 0px 0px 0px 0px rgba(var(--light-color), 0);
  text-shadow: 0px 0px 2px rgba(var(--text-color), 0);
}

.neumorphic-btn:active {  
  box-shadow: 7px 7px 15px 0px rgba(var(--shadow-color), .3), -7px -7px 15px 0px rgba(var(--light-color), 1), inset 4px 4px 8px 0px rgba(var(--shadow-color), .3), inset -4px -4px 8px 0px rgba(var(--light-color), 1) !important;
  border: 2px solid var(--border-active-color);
  text-shadow: 0px 0px 2px rgba(var(--text-color), .3);
}

.neumorphic-btn_primary {
  background: linear-gradient(135deg, var(--main-action-left), var(--main-action-right));
  color: #E0E0E0;
}

.neumorphic-btn_primary:active {
  box-shadow: 7px 7px 15px 0px rgba(var(--shadow-color), .3), -7px -7px 15px 0px rgba(var(--light-color), 1), inset 4px 4px 20px 0px rgba(0, 0, 0, .3) !important;
}
.neumorphic-btn_fab {    
  width: 40px;
  height: 40px;
  padding: 0;
}

.neumorphic-card {
    background-color: #ddd;
    box-shadow: 0 0 6px 6px #dddddd, 12px 12px 16px 8px rgba(136, 136, 136, 0.7), -12px -12px 16px 8px rgba(244, 244, 244, 0.7);
  padding: 25px;
  border-radius: 35px;
  width: max-content;
}
.neumorphic-card-black
{
  background-color: #26282B;
        box-shadow: 0 0 6px 6px #26282B, 12px 12px 16px 8px rgba(2, 2, 2, 0.7), -12px -12px 16px 8px rgba(27, 27, 27, 0.7);
  padding: 25px;
  border-radius: 35px;
  width: max-content;
  
}
.neumorphic-text {
  color: var(--text-color);
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
}

.neumorphic-text_title {
  font-size: 20px;
  color: var(--title-color);
}

.neumorphic-card__body {
  padding: 15px 0;
}

.neumorphic-image-wrapper {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 5px solid var(--back-color);
  box-shadow: 7px 7px 15px 5px rgba(var(--shadow-color), .3), -4px -4px 5px 7px rgba(var(--light-color), 1);
}






.neumorphic-slider {
  width: 400px;
  max-width: 100%;
  height: 30px;
  position: relative;
}

.neumorphic-slider__back {
  height: 6px;
  width: 100%;
  border-radius: 3px;
  border: none;
  position: absolute;
  bottom: 10px;
  cursor: pointer;
  box-shadow: inset 2px 2px 3px -2px rgba(var(--shadow-color), .3), inset -2px -2px 3px 0px rgba(var(--light-color), .5);
}

.neumorphic-slider__line {
  height: 6px;
  width: 40%;
  border-radius: 3px;
  left: 0;
  position: absolute;
  bottom: 9px;
  background: linear-gradient(90deg, var(--main-action-left), var(--main-action-right));
  cursor: pointer;
}

.neumorphic-slider__thumb {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin-left: -15px;
  background-color: var(--back-color);
  position: absolute;
  bottom: -2.4px;
  left: 40%;
  z-index: 1;
  cursor: pointer;    
  box-shadow: 4px 4px 5px -2px rgba(var(--shadow-color), .5), -4px -4px 5px 0px rgba(var(--light-color), .4);
}

.neumorphic-slider__thumb::after {
  content: '';
  display: block;
  background-color: var(--main-action-right);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;    
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 2px 2px 6px 0px rgba(var(--shadow-color), .3);
}

.neumorphic-slider_moving {
  cursor: pointer;
}

.neumorphic-slider_moving .neumorphic-slider__thumb {
}

.neumorphic-slider__text {
  color: var(--text-color);
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 600;
}

.neumorphic-slider__text_left {
  position: absolute;
  bottom: 30px;
  left: 0;
}

.neumorphic-slider__text_right {
  position: absolute;
  bottom: 30px;
  right: 0;
}

.player-controls .btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 7px 7px 15px 0px rgba(var(--shadow-color), .3), -7px -7px 15px 0px rgba(var(--light-color), 1), inset -1px -1px 2px 0px rgba(var(--shadow-color), .3), inset 1px 1px 2px 0px rgba(var(--light-color), 1);
}